<script lang="ts">
import { ref } from 'vue'
import { areaList } from '@vant/area-data'
import { onMounted } from 'vue'

export default {
  setup() {
    const range = (n: number) => Array.from({ length: n }, (_, i) => i)

    const businessLicense = ref([]) // 工商营业执照
    const enterpriseCreditCode = ref('') // 统一社会信用代码
    const enterpriseName = ref('') // 企业名称
    const registrationDate = ref('') // 注册日期
    const showRegistrationDatePicker = ref(false)
    const onRegistrationDateConfirm = ({ selectedValues }: { selectedValues: string[] }) => {
      registrationDate.value = selectedValues.join('/')
      showRegistrationDatePicker.value = false
    }
    const businessLocation = ref('') // 经营场所省市区
    const hgAreaList = ref(areaList)
    const showHgArea = ref(false)
    const onHgAreaConfirm = ({ selectedOptions }: { selectedOptions: { text: string }[] }) => {
      console.log(areaList)
      showHgArea.value = false
      businessLocation.value = selectedOptions.map((item: { text: any }) => item.text).join('/')
    }
    onMounted(() => {
      hgAreaList.value = areaList
      hgAreaList.value.province_list = {
        420000: '湖北省'
      }
      hgAreaList.value.city_list = { '421100': '黄冈市' }
    })
    const businessAddress = ref('') // 经营场所详细地址
    const businessType = ref('企业') // 创办企业性质
    const isAbnormalBusiness = ref('否') // 是否纳入异常名录
    const isFirstBusiness = ref('是')
    const businessLocationImages = ref([]) // 经营场所影像
    const employedNumber = ref(3) // 带动就业人数
    const employeeIds = ref(Array(3).fill(''))
    const updateEmployedNumber = (count: number) => {
      employeeIds.value = Array(count).fill({ idNumber: '' })
    }
    const employeeIdCardImages = ref([]) // 带动就业人员身份证影
    const salaryProofs = ref([]) // 带动就业人员工资流水证明
    const laborContracts = ref([]) // 带动就业人员劳动合同

    return {
      range,
      businessLicense,
      enterpriseCreditCode,
      enterpriseName,
      registrationDate,
      showRegistrationDatePicker,
      onRegistrationDateConfirm,
      businessLocation,
      hgAreaList,
      showHgArea,
      onHgAreaConfirm,
      businessAddress,
      businessType,
      isAbnormalBusiness,
      isFirstBusiness,
      businessLocationImages,
      employedNumber,
      employeeIds,
      updateEmployedNumber,
      employeeIdCardImages,
      salaryProofs,
      laborContracts
    }
  }
}
</script>

<template>
  <!-- 工商营业执照 -->
  <van-cell-group>
    <!-- 上传工商营业执照 -->
    <a-divider orientation="left" orientation-margin="8px">工商营业执照</a-divider>
    <van-field
      name="businessLicense"
      label="工商营业执照"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请上传工商营业执照' }]"
    >
      <template #input>
        <van-uploader v-model="businessLicense" multiple :max-count="1" />
      </template>
    </van-field>
  </van-cell-group>

  <!-- 企业基本信息 -->
  <van-cell-group>
    <a-divider orientation="left" orientation-margin="8px">企业基本信息</a-divider>
    <!-- 统一社会信用代码-->
    <van-field
      name="enterpriseCreditCode"
      v-model="enterpriseCreditCode"
      label="统一社会信用代码"
      placeholder="请输入18位统一社会信用代码"
      label-width="10rem"
      required
      :rules="[{ pattern: /[A-Za-z0-9]{18}/, message: '请输入18位统一社会信用代码' }]"
    />
    <!-- 企业名称-->
    <van-field
      name="enterpriseName"
      v-model="enterpriseName"
      label="企业名称"
      placeholder="请输入企业名称"
      required
      :rules="[{ required: true, message: '请输入企业名称' }]"
    />
    <!-- 注册日期 -->
    <van-field
      name="registrationDate"
      v-model="registrationDate"
      is-link
      readonly
      label="注册日期"
      placeholder="点击选择时间"
      @click="showRegistrationDatePicker = true"
      required
      :rules="[{ required: true, message: '请选择注册日期' }]"
    />
    <van-popup v-model:show="showRegistrationDatePicker" position="bottom">
      <van-date-picker
        @confirm="onRegistrationDateConfirm"
        @cancel="showRegistrationDatePicker = false"
      />
    </van-popup>
  </van-cell-group>

  <!-- 经营场所影像 -->
  <van-cell-group>
    <a-divider orientation="left" orientation-margin="8px">经营场所影像</a-divider>
    <!-- 上传经营场所影像 -->
    <van-field
      name="businessLocationImages"
      label="经营场所影像"
      required
      label-width="10rem"
      :rules="[
        {
          required: true,
          message:
            '请上传经营场所照片至少2张，具体为申请人与店面门头或铺面招牌合影1张、申请人与经营场所合影1张。'
        }
      ]"
    >
      <template #input>
        <van-uploader v-model="businessLocationImages" multiple />
      </template>
    </van-field>
    <van-cell
      title="说明：请上传经营场所照片至少2张，具体为申请人与店面门头或铺面招牌合影1张、申请人与经营场所合影1张。"
    />
  </van-cell-group>

  <!-- 企业员工信息 -->
  <van-cell-group>
    <a-divider orientation="left" orientation-margin="8px">企业员工信息</a-divider>
    <!-- 带动就业人数-->
    <van-field
      name="employedNumber"
      label="带动就业人数"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请填写带动就业人数' }]"
    >
      <template #input>
        <van-stepper v-model="employedNumber" @change="updateEmployedNumber" />
      </template>
    </van-field>
    <!-- 带动就业人身份证号码 -->
    <van-cell
      title="说明：按带动就业人数上传员工身份证影像件，发放不少于3个月的工资流水证明以及劳动合同（例：带动就业3人，则分别上传3人的资料）。"
    />
    <!-- 员工身份证影像件 -->
    <van-field
      name="employeeIdCardImages"
      label="员工身份证影像件"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请上传员工身份证影像件' }]"
    >
      <template #input>
        <van-uploader v-model="employeeIdCardImages" multiple />
      </template>
    </van-field>
    <!-- 发放工资流水证明 -->
    <van-field
      name="salaryProofs"
      label="发放工资流水证明"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请上传发放工资流水证明' }]"
    >
      <template #input>
        <van-uploader v-model="salaryProofs" multiple />
      </template>
    </van-field>
    <!-- 劳动合同上传-->
    <van-field
      name="laborContracts"
      label="劳动合同影像件"
      required
      label-width="10rem"
      :rules="[{ required: true, message: '请上传员工劳动合同影像件' }]"
    >
      <template #input>
        <van-uploader v-model="laborContracts" multiple />
      </template>
    </van-field>
  </van-cell-group>
</template>
